<template>
  <div class="information-container">
    <!-- 用户信息卡片 -->
    <el-card class="user-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <el-button
            type="primary"
            size="small"
            @click="handleEdit"
          >
            编辑资料
          </el-button>
        </div>
      </template>

      <div class="user-profile">
        <!-- 头像区 -->
        <div class="avatar-section">
          <el-avatar :size="120" :src="userInfo.avatar || defaultAvatar" />
          <el-upload
            class="avatar-uploader"
            action="/api/upload/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="text" icon="el-icon-camera">更换头像</el-button>
          </el-upload>
        </div>

        <!-- 信息区 -->
        <div class="info-section">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户名">
              {{ userInfo.username || '未设置' }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              {{ userInfo.phone || '未绑定' }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ userInfo.email || '未绑定' }}
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              {{ formatDate(userInfo.createTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="最后登录">
              {{ formatDate(userInfo.lastLoginTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- 其他信息区域 -->
    <div class="additional-info">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="订单记录" name="orders">
          <order-history v-if="activeTab === 'orders'" />
        </el-tab-pane>
        <el-tab-pane label="收藏店铺" name="favorites">
          <favorite-shops v-if="activeTab === 'favorites'" />
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="security">
          <security-settings v-if="activeTab === 'security'" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { formatDate } from '@/utils/date'
import defaultAvatar from '@/assets/default-avatar.png'
import OrderHistory from './components/OrderHistory.vue'
import FavoriteShops from './components/FavoriteShops.vue'
import SecuritySettings from './components/SecuritySettings.vue'

const store = useStore()
const activeTab = ref('orders')

// 获取用户信息
const userInfo = computed(() => store.getters['user/userInfo'] || {})

// 初始化加载用户数据
onMounted(() => {
  if (!userInfo.value.username) {
    store.dispatch('user/getUserInfo')
  }
})

// 头像上传处理
const handleAvatarSuccess = (response) => {
  if (response.code === 200) {
    store.commit('user/SET_USER_INFO', {
      ...userInfo.value,
      avatar: response.data.url
    })
    ElMessage.success('头像更新成功')
  }
}

const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件')
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB')
  }

  return isImage && isLt2M
}

// 编辑资料
const handleEdit = () => {
  // 这里可以跳转到编辑页面或打开编辑对话框
  console.log('编辑资料')
}
</script>

<style scoped lang="scss">
.information-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;

  .user-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
    }

    .user-profile {
      display: flex;
      padding: 20px;

      .avatar-section {
        width: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 30px;

        .avatar-uploader {
          margin-top: 15px;
          text-align: center;
        }
      }

      .info-section {
        flex: 1;
      }
    }
  }

  .additional-info {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .information-container {
    padding: 0 10px;

    .user-profile {
      flex-direction: column !important;

      .avatar-section {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
      }
    }
  }
}
</style>


